<template>
    <div class="sm:hidden relative" v-if="!isHidden">
        <div class="fixed w-64 bg-[color:var(--menu-bg)] dark:bg-[#121212] flex-col py-3 h-full z-10 sidebar"
            :class="{ 'collapsed': isCollapsed }">
            <div class="flex p-6 items-center cursor-pointer" @click="jumpHome">
                <img src="../assets/logo.svg" />
            </div>
            <Menu @route-change="handleRouteChange" />
        </div>
        <!-- <div class="fixed inset-0 bg-black/10 z-5" :class="{ 'mask': isCollapsed }" @click="toggleSidebar"></div> -->
        <div class="el-overlay" style="z-index: 9;" :class="{ 'mask': isCollapsed }" @click="toggleSidebar">
        </div>
    </div>
    <!------------------------------------------------------------------------------------------------------->
    <div class=" flex-1 flex-initial   shadow-[0_4px_4px_-1px_rgba(0,0,0,0.2)]">
        <div class="flex-1  mx-auto  ">
            <div class="flex items-center justify-between gap-4">
                <!-- 左侧标签 -->
                <div class="flex items-center">
                    <div class="sm:hidden">
                        <img class="w-[56px]" src="../assets/logo-mini.svg" alt="">
                    </div>
                    <div class="sm:hidden items-center">
                        <div class="cursor-pointer py-5 px-3 hover:bg-[#0000000d] dark:hover:bg-[#ffffff0d]"
                            @click="minToggleSidebar">
                            <MenuUnfoldOne v-if="!isCollapsed" theme="outline" size="16" fill="#515a6e" />
                            <MenuFoldOne v-else theme="outline" size="16" fill="#515a6e" />
                        </div>
                    </div>
                    <div class="hidden sm:flex items-center">
                        <div class="cursor-pointer py-5 px-3 hover:bg-[#0000000d] dark:hover:bg-[#ffffff0d]"
                            @click="toggleSidebar">
                            <MenuUnfoldOne v-if="!isCollapsed" theme="outline" size="16" fill="#515a6e" />
                            <MenuFoldOne v-else theme="outline" size="16" fill="#515a6e" />
                        </div>
                    </div>
                    <div class="hidden sm:flex items-center">
                        <div class="cursor-pointer py-5 px-3 hover:bg-[#0000000d] dark:hover:bg-[#ffffff0d]"
                            @click="refresh">
                            <Redo theme="outline" size="16" fill="#515a6e" />
                        </div>
                    </div>
                    <div class="hidden sm:flex justify-around items-center text-[14px] text-[#babdc3] gap-3 px-2">
                        <router-link to="/">首页</router-link>
                        <span class="text-[12px]">/</span>
                        <span v-for="(item, index) in breadcrumbs" :key="index" class="text-[#515a6e]">

                            <router-link v-if="index < breadcrumbs.length - 1" :to="item.path">
                                {{ item.meta.title }}
                            </router-link>
                            <span v-else>{{ item.meta.title }}</span>
                        </span>
                    </div>
                </div>

                <!-- 右侧设置 -->
                <div class="flex items-center sm:px-4">
                    <div class="cursor-pointer py-5 px-3 hover:bg-[#0000000d] dark:hover:bg-[#ffffff0d] "
                        @click="toggleTheme">
                        <Brightness v-if="Theme !== 'dark'" theme="outline" size="16" fill="#515a6e" />
                        <Moon v-else theme="outline" size="16" fill="#515a6e" />
                    </div>
                    <div class="cursor-pointer py-5 px-3 hover:bg-[#0000000d] dark:hover:bg-[#ffffff0d] "
                        @click="toggleFullScreen(isFullScreen = !isFullScreen)">
                        <FullScreen v-if="!isFullScreen" theme="outline" size="16" fill="#515a6e" />
                        <OffScreen v-else theme="outline" size="16" fill="#515a6e" />
                    </div>
                    <el-dropdown>
                        <div
                            class="flex items-center cursor-pointer py-4 px-3 hover:bg-[#0000000d] dark:hover:bg-[#ffffff0d] ">
                            <el-avatar :size="32" class="mr-4"
                                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                            <div class="hidden md:flex text-[14px] text-[#515a6e] ">用户名</div>
                        </div>
                        <template #dropdown class="dropdownPop">
                            <el-dropdown-menu>
                                <el-dropdown-item :icon="Classroom" @click="toUser">个人中心</el-dropdown-item>
                                <el-dropdown-item :icon="SettingTwo" @click="toSetting">设置</el-dropdown-item>
                                <el-dropdown-item divided :icon="Logout" @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

        </div>
    </div>
    <!----------------------------------------------------------------------------------------------------->



</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, computed } from 'vue'
import Menu from './menu.vue'
import { Search, FullScreen, Brightness, OffScreen, Moon, Classroom, SettingTwo, Logout, MenuFoldOne, ApplicationMenu, SettingConfig, ExpandRight, MenuUnfoldOne, Redo } from '@icon-park/vue-next'
import { useRouter, useRoute } from 'vue-router'
import { settingMode } from '@/stores/setting'
import { userMode } from '@/stores/user'
import { toggleLocalFullscreen } from '@/utils/common'
import { ElMessage } from 'element-plus';
const router = useRouter()
const route = useRoute()
const settingsStore = settingMode()
const userStore = userMode()
// 搜索框绑定变量
const searchQuery = ref('')
const isCollapsed = ref(false);
const isHidden = ref(true)
const Theme = ref(localStorage.getItem('theme') || 'light');
const isFullScreen = ref(false)

const breadcrumbs = computed(() => {
    console.log(route.matched)
    const matched = route.matched.filter(item => item.meta.title)
    return matched
})
const jumpHome = () => {
    window.location.href = '/'
}
const toggleFullScreen = (val: boolean) => {
    let html = document.documentElement
    toggleLocalFullscreen(html)
}
const toggleTheme = () => {

    let html = document.documentElement
    // val ? html.className = 'dark' : html.className = ''
    html.classList.toggle('dark')
    settingsStore.changeTheme()
    Theme.value = localStorage.getItem('theme') || 'light'
}

const toggleSidebar = () => {
    isCollapsed.value = !isCollapsed.value;
    settingsStore.collapse = isCollapsed.value
};

const refresh = () => {
    ElMessage.warning('请自行编写刷新功能');
}
const minToggleSidebar = () => {
    if (isHidden.value) {
        toggleSidebar()
        isHidden.value = false
    }
    toggleSidebar()
}
const handleRouteChange = (newPath: string) => {
    if (!isCollapsed.value) {
        isCollapsed.value = !isCollapsed.value;
    }
}
const toUser = () => {
    router.push({ path: '/user', query: { activeName: 'center' } })

}
const toSetting = () => {
    router.push({ path: '/user', query: { activeName: 'setting' } })
}
const logout = () => {
    userStore.clearUser()
    router.push('/login')
}
onMounted(() => {


})
</script>
<style scoped>
:deep(.el-tooltip__trigger:focus-visible) {
    outline: unset;
}

.sidebar {
    transition: transform 0.3s ease-in-out;
}

/* 收缩状态：向左移动 100% 宽度 */
.sidebar.collapsed {
    transform: translateX(-100%);
}

.mask {
    display: none;
}

/* :deep(.el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover) {
    background-color: gray;
} */
</style>